<template>
    <a-drawer :title="title" :maskClosable="true" :width="drawerWidth" placement="right" :closable="true"
              @close="handleCancel" :visible="visible" style="height: 100%;overflow: auto;padding-bottom: 53px;">

        <template slot="title">
            <div style="width: 100%;">
                <span>{{ title }}</span>
                <span style="display:inline-block;width:calc(100% - 51px);padding-right:10px;text-align: right">
					<a-button @click="toggleScreen" icon="appstore" style="height:20px;width:20px;border:0px">
					</a-button>
				</span>
            </div>
        </template>

        <a-spin :spinning="confirmLoading">
            <a-form :form="form">
                <a-form-item label="名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <a-input placeholder="名称" v-decorator.trim="[ 'name', validatorRules.notBlank]"/>
                </a-form-item>
                <a-form-item label="标识" :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <a-input placeholder="标识" v-decorator.trim="[ 'serverGBId', validatorRules.notBlank]"/>
                </a-form-item>
                <!--				<a-form-item label="外域服务国标域" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
                <!--					<a-input placeholder="外域服务国标域" v-decorator.trim="[ 'serverGBDomain', validatorRules.notBlank]" />-->
                <!--				</a-form-item>-->
                <a-form-item label="IP" :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <a-input placeholder="IP" v-decorator.trim="[ 'serverIP', validatorRules.notBlank]"/>
                </a-form-item>
                <a-form-item label="端口" :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <a-input placeholder="端口" v-decorator.trim="[ 'serverPort', validatorRules.notBlank]"/>
                </a-form-item>
                <a-form-item label="认证密码" :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <a-input placeholder="认证密码" v-decorator.trim="[ 'password', validatorRules.notBlank]"/>
                </a-form-item>
                <a-form-item label="连接周期(秒)" :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <a-input placeholder="连接周期(秒)" v-decorator.trim="[ 'expires', validatorRules.notBlank]"/>
                </a-form-item>
                <a-form-item label="心跳周期(秒)" :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <a-input placeholder="心跳周期(秒)" v-decorator.trim="[ 'keepTimeout', validatorRules.notBlank]"/>
                </a-form-item>
                <a-form-item label="信令传输" :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <a-select placeholder="请选择" v-decorator.trim="[ 'transport', validatorRules.notBlank]"
                              default-value="UDP">
                        <a-select-option value="UDP">UDP</a-select-option>
                        <a-select-option value="TCP">TCP</a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item label="字符集" :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <a-select placeholder="请选择" v-decorator.trim="[ 'characterSet', validatorRules.notBlank]">
                        <a-select-option value="GB2312">GB2312</a-select-option>
                        <a-select-option value="UTF-8">UTF-8</a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item label="启用/禁用" :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <a-select placeholder="请选择" v-decorator.trim="[ 'enable', validatorRules.notBlank]">
                        <a-select-option value="1">是</a-select-option>
                        <a-select-option value="0">否</a-select-option>
                    </a-select>
                </a-form-item>
            </a-form>
        </a-spin>

        <div class="drawer-bootom-button" v-show="!disableSubmit">
            <a-popconfirm title="确定放弃编辑？" @confirm="handleCancel" okText="确定" cancelText="取消">
                <a-button style="margin-right: .8rem">取消</a-button>
            </a-popconfirm>

            <a-button @click="handleNext" type="primary" :loading="confirmLoading">保存</a-button>
        </div>
    </a-drawer>
</template>

<script>
    import pick from 'lodash.pick'
    import {
        postAction
    } from '@/api/manage'

    export default {
        name: "PlatformAddModal",
        components: {},
        data() {
            return {
                modelList: [],
                model: {},
                form: this.$form.createForm(this),
                validatorRules: {
                    notBlank: {
                        rules: [{
                            required: true,
                            message: '请输入必填项!'
                        }]
                    }
                },
                title: "新增",
                visible: false,
                modaltoggleFlag: true,
                confirmDirty: false,
                disableSubmit: false,
                labelCol: {
                    xs: {
                        span: 24
                    },
                    sm: {
                        span: 5
                    },
                },
                wrapperCol: {
                    xs: {
                        span: 24
                    },
                    sm: {
                        span: 16
                    },
                },
                modalWidth: 800,
                drawerWidth: 700,
                confirmLoading: false,
            }
        },
        created() {
            this.form.getFieldDecorator('transport', {initialValue: 'UDP', preserve: true})
            this.form.getFieldDecorator('enable', {initialValue: '1', preserve: true})
            this.form.getFieldDecorator('expires', {initialValue: '300', preserve: true})
            this.form.getFieldDecorator('characterSet', {initialValue: 'GB2312', preserve: true})
            this.form.getFieldDecorator('keepTimeout', {initialValue: '60', preserve: true})
            this.form.getFieldDecorator('serverPort', {initialValue: '5060', preserve: true})
            this.form.resetFields('name');
        },
        computed: {},
        methods: {
            //窗口最大化切换
            toggleScreen() {
                if (this.modaltoggleFlag) {
                    this.modalWidth = window.innerWidth;
                } else {
                    this.modalWidth = 800;
                }
                this.modaltoggleFlag = !this.modaltoggleFlag;
            },
            show() {
                this.visible = true;
                // 调用此方法,根据屏幕宽度自适应调整抽屉的宽度
                this.resetScreenSize();
                this.form.resetFields();
                this.$nextTick(() => {
                    this.form.setFieldsValue(pick(this.model,
                        'modelId', 'devAddr', 'sipAddr',
                        'name', 'devDesc', 'location', 'used', 'autoCreatePeripheral',
                        'timeSync', 'ntpAddr', 'ntpPort'))
                });
            },
            close() {
                this.$emit('close');
                this.visible = false;
                this.disableSubmit = false;
            },
            handleNext() {//添加设备下一步
                const that = this;
                // 触发表单验证
                this.form.validateFields((err, values) => {
                    if (!err) {
                        that.confirmLoading = true;
                        let formData = Object.assign(this.model, values);
                        postAction("/platform/add", formData).then((res) => {
                            if (res.code == "00000") {
                                //子类绑定父类引组件的方法
                                that.$emit("ok")
                                that.$message.success("级联添加成功")
                            } else {
                                that.$message.warning("操作失败" + res.msg);
                            }
                        }).finally(() => {
                            that.confirmLoading = false;
                            that.close();
                        })
                    }
                })
            },
            handleCancel() {
                this.close()
            },
            // 根据屏幕变化,设置抽屉尺寸
            resetScreenSize() {
                let screenWidth = document.body.clientWidth;
                if (screenWidth < 500) {
                    this.drawerWidth = screenWidth;
                } else {
                    this.drawerWidth = 700;
                }
            }
        }
    }
</script>

<style scoped>
    .avatar-uploader > .ant-upload {
        width: 104px;
        height: 104px;
    }

    .ant-upload-select-picture-card i {
        font-size: 49px;
        color: #999;
    }

    .ant-upload-select-picture-card .ant-upload-text {
        margin-top: 8px;
        color: #666;
    }

    .ant-table-tbody .ant-table-row td {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .drawer-bootom-button {
        position: absolute;
        bottom: -8px;
        width: 100%;
        border-top: 1px solid #e8e8e8;
        padding: 10px 16px;
        text-align: right;
        left: 0;
        background: #fff;
        border-radius: 0 0 2px 2px;
    }
</style>
